<template>
    <div class="timing" >
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="请求名称">
                <el-input clearable v-model="formInline.requestName" placeholder="请输入请求名称"></el-input>
            </el-form-item>
            <el-form-item label="appKey">
                <el-select clearable v-model="formInline.appKey" placeholder="请选择">
                    <el-option v-for="(item,index) in options" :key="index" :label="item.serverObjectName" :value="item.appKey"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getUserList">查询</el-button>
            </el-form-item>
        </el-form>
      <!-- 表格 -->
      <admincentertb ref="httbRef"
      :btn-is-show="btnIsShow"
      :table-col="tabUserList"
      :table-data="tableUserData"
      @getDataDetileInfo="getDataDetileInfo"
       @deleteSelectData="deleteSelectData" @refresh="getUserList" />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>



      <el-dialog
        title="详情"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
        <admincentertb ref="httbRef2"
        :btn-is-show="{
          operate:false
        }"
        :table-col="tabUserList2"
        :table-data="dialogList" />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page2"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
        />
      </div>
      </el-dialog>
    </div>

  </template>

  <script>
import request from '@/utils/request'
  export default {
    components: { },
    data() {
      return {
        dialogList:[],
        dialogVisible: false,
        btnIsShow: {
          dialogFlag:true,
          operate: false,
          detile: false,
          example:false,
          getDetile:false,
          update:false,
          del: false
        },
        rules: {},
        formInline:{
            requestName:"",
            appKey:""
        },
        tableUserData: [],
        options:[],
        tabUserList: [
          {
            key: 'requestName',
            title: '请求名称'
          },
          {
            key: 'requestURL',
            title: '访问地址'
          },
          {
            key: 'remark',
            title: '备注'
          },
          {
            key: 'detail',
            title: '请求参数'
          },
          {
            key: 'createTime',
            title: '创建时间'
          },
          {
            key: 'updateTime',
            title: '更新时间'
          }
        ],
         tabUserList2: [
          {
            key: 'orgiData',
            title: '原始数据'
          },
           {
            key: 'remark',
            title: '规则'
          },
          {
            key: 'nowData',
            title: '脱密数据'
          },
          {
            key: 'createTime',
            title: '创建时间'
          }
        ],
        vObj:null,
        queryId:'',
        total: 0,
        size: 10,
        page: 1,
        total2: 0,
        size2: 10,
        page2: 1
      }
    },
    created() {
        request({
                url: '/ht-datacenter/requestLog/getServerObject',
                method: 'post',
                data:{}
            }).then(res => {
                if (res.code == 200) {
                    this.options = res.data
                }
            })
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
      })
    },
    methods: {
        showDialog(id){
          this.queryId = id
          request({
                url: `/ht-datacenter/WordRequestLog/page?current=${this.page2}&size=${this.size2}&requestLogId=${id}`,
                method: 'get',
            }).then(res => {
                if (res.code == 200) {
                    this.dialogList = res.data.records
                    this.total2 = Number(res.data.total)
                    this.dialogVisible = true
                }
            })
        },

        handleSizeChange2(v) {
          this.page2 = 1
          this.size2 = v
          this.showDialog(this.queryId)
        },
        handleCurrentChange2(v) {
            this.page2 = v
            this.showDialog(this.queryId)
        },
        handleSizeChange(v) {
          this.page = 1
            this.size = v
            this.getUserList()
        },
        handleCurrentChange(v) {
            this.page = v
            this.getUserList()
        },

        // 获取用户列表
        getUserList() {
            this.dialogTableVisible = false
            this.$refs.httbRef.isShowLoading(true)
            let that = this
            request({
                url: '/ht-datacenter/requestLog/getRequestLogList',
                method: 'post',
                data:{
                    'page': this.page,
                    'limit': this.size,
                    ...that.formInline
                }
            }).then(res => {
                if (res.code == 200) {
                    this.tableUserData = res.data.records
                    this.total = Number(res.data.total)
                    this.$refs.httbRef.isShowLoading(false)
                } else {
                that.$notify.error({
                    title: '错误',
                    message: res.msg
                })
                }
            })
        }
        }
    }
  </script>

  <style lang="scss" scoped>
    @import "~@/assets/styles/auto.scss";
    .fromClass{
      padding: 20px 0;
    }
        .info{
          margin-top: 20px;
        }
        .info>p{
          padding:4px 0;
          margin-left:80px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .info>p:nth-child(1){
          color: #474747;
          font-weight: bold;
          background: #f1f4f7;
          padding-left: 0px;
        }
        .info>p>label{
          display: inline-block;
          width:35%;
        }
        .info>p>span{
          color:#494949;padding: 2px 4px;
          border-radius: 2px;font-size: 12px;
          background: #f0f0f0;
        }
      .ztree {
          margin-left:80px;
          border:1px solid #efefef;
          padding: 4px;
          border-radius: 2px;
          min-height: 270px;
          height: 300px;
          overflow-y: scroll;
      }
      .resoceDialog{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .resoceDialog>div>p{
        color: #464646;
        padding: 10px 0;
        font-weight: bold;
        // background: #f1f4f7;
        margin-left:26px;
        padding-left:0px;
        margin-bottom: 5px;
        text-align: right;
      }
        >>>.jsoneditor-poweredBy {
          display: none !important;
        }

        .addPs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
          >div{
            width:50%
          }
          span{
            display: inline-block;
            width: 10%;
          }
        }
        .autoClass{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        .autoClass .el-form-item{
          width:50%;
        }
        .addcs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
        }
        .addcs2 .el-select {
          display: inline-block;
          width: 240px;
        }
        .autoInput{
          display: inline-block;
          width: 70%;
        }
        .infoTitle{
          border-bottom:1px solid #e5e5e5;
          margin-bottom: 30px;
          position: relative;
        }
        .infoTitle>span{
          position: absolute;
          left: 20px;
          background: #fff;
          width:80px;
          top:-15px;
          height:30px;
          text-align: center;
          line-height: 30px;
        }
          .el-select{
             width:100%;
          }
          .timing{
            background:#fff;
            padding:20px 10px;
          }
        </style>
